<template>
	<div>
		<div class="commonPop" :class="show ? 'show' : ''" @click="close"></div>
		<div class="commonMain" :class="show ? 'show' : ''" @click.stop>
			<div @click="close" class="close iconfont icon-yuyinguanbi"></div>
			<div class="appMain flex">
				<div class="item flex">
					<div class="h3"><img src="/img/android.png" />安卓App下载</div>
					<img src="/img/qrcode.png" />
					<div class="btn">下载到电脑</div>
				</div>
				<div class="item flex">
					<div class="h3"><img src="/img/ios.png" />苹果App下载</div>
					<img src="/img/qrcode.png" />
					<div class="btn">访问AppStore</div>
				</div>
				<div class="item flex">
					<div class="h3"><img src="/img/harmony.png" />鸿蒙App下载</div>
					<img src="/img/qrcode.png" />
					<div class="btn">下载到电脑</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
				// 显示隐藏
				show: false,
				
			}
		},
		methods: {
			
			// 打开弹窗
			open(){
				this.show = true;
			},
			
			// 关闭弹窗
			close(){
				this.show = false;
			},
			
		},
		asyncData({ app }) {
			
		},
	}
</script>

<style lang="scss" scoped>
	.commonPop{
		background: rgba(0,0,0,0.55);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2000;
		visibility: hidden;
		opacity: 0;
		transition: 0.2s all;
		backdrop-filter: blur(10px);
		&.show{
			opacity: 1;
			visibility: visible;
		}
	}
	.commonMain{
		position: fixed;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 700px;
		height: 350px;
		max-height: 90vh;
		z-index: 2001;
		overflow: hidden;
		top: -100%;
		border-radius: 10px;
		transition: 0.15s all;
		background: #FFF;
		&.show{
			top: 50%;
		}
		.close{
			position: absolute;
			right: 20px;
			top: 20px;
			font-size: 20px;
			color: #c3c3c3;
			line-height: 30px;
			width: 30px;
			text-align: center;
			cursor: pointer;
			transition: 0.2s all;
			&:hover{
				opacity: 0.8;
			}
		}
		.appMain{
			height: 100%;
			width: 100%;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			.item{
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-right: 54px;
				&:nth-last-child(1){
					margin-right: 0;
				}
				.h3{
					font-size: 17px;
					font-weight: bold;
					line-height: 25px;
					img{
						width: 23px;
						vertical-align: middle;
						margin-top: -2px;
						margin-right: 10px;
					}
				}
				&>img{
					width: 150px;
					height: 150px;
					border-radius: 10px;
				}
				.btn{
					width: 86%;
					background: #F6F6F6;
					font-size: 15px;
					font-weight: bold;
					line-height: 41px;
					border-radius: 100px;
					text-align: center;
					margin-top: 15px;
					cursor: pointer;
					transition: 0.2s all;
					color: #3a84e3;
					&:hover{
						opacity: 0.8;
					}
				}
			}
		}
	}
</style>